<template>
  <div class="main">
<!--    <select v-model="selectedClass">-->
<!--      <option :value="item.id" :key="item.id" v-for="item in classList">{{item.name}}</option>-->
<!--    </select>-->
<!--    <select v-model="selectedClothes">-->
<!--      <option :value="item.id" :key="item.id" v-for="item in clothesList">{{item.name}}</option>-->
<!--    </select>-->
    <div class="left">
      <el-cascader  style="width: 100%;position: relative;top: 0.5rem;" @change="handleChange" placeholder="请选择服装" v-model="select" :options="options" :props="{ expandTrigger: 'hover' }"></el-cascader>
    </div>
<!--        <div class="divide"></div>-->
    <div class="number">
      <span>舆情数据：</span><span>{{number}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "general",
  data() {
    return {
      select: ['0','0-0'],
      options: [{value: '0',label: '上衣',children:[{value:'0-0',label:'111'},{value:'0-1',label:'222'}]},
        {value: '1',label: '裤子',children:[{value:'1-0',label:'333'},{value:'1-1',label:'444'}]},
        {value: '2',label: '连衣裙',children:[{value:'2-0',label:'555'},{value:'2-1',label:'666'}]}],
      number: '1,948,353',
    }
  },
  mounted() {
  },
  methods: {
    handleChange(value){
      console.log(value);
      this.$emit("change",value);
    }
  }
}
</script>

<style>
.el-cascader-menu__wrap{
  height: 10rem!important;
}
.el-cascader-panel{
  border-radius: 0!important;
  outline: none!important;
}
.el-cascader__dropdown{
  border: none!important;
  border-radius: 0!important;
  box-shadow: none!important;
  background: #133959!important;
  outline: none!important;
}
.el-cascader-menu{
  min-width: 7.5rem!important;
  /*color: white!important;*/
  border-radius: 0!important;
  outline: none!important;
}
.el-cascader-menu__list{
  border-radius: 0!important;
  outline: none!important;
}
.el-cascader-node:hover{
  background: #0e94eb!important;
}
.el-cascader-node:focus{
  background: #0e94eb!important;
}
.el-cascader-node__label{
  color: white!important;
  font-weight: normal!important;
}
.el-input__inner{
  font-size: 1rem!important;
  color: white!important;
  background: transparent!important;
  border: 1px solid white!important;
  outline: none!important;
  border-radius: 0!important;
}
.el-input__inner::placeholder{
  color: white!important;
}
</style>
<style scoped>
.main {
  height: 2rem!important;
  margin: 0.5rem 0;
  /*padding-right: 0.6rem;*/
}
.left{
  width: 50%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.divide {
  background-image: url("../assets/line_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: calc(3rem + 2px);
  width: 10px;
  margin-left: -2rem;
  /*margin: 0 1rem;*/
}
.number {
  display: flex;
  border: 1px solid white;
  height: 3rem;
  /*float: right;*/
  box-sizing: border-box;
  width: calc(50% - 0.6rem);
  color: #0e94ea;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 3rem;
  font-size: 2rem;
  font-weight: bold;
}
.number span:nth-child(1){
  flex: 0 0 45%;
  color: white;
  font-weight: normal;
  font-size: 1.5rem;
}
.number span:nth-child(2){
  flex: 1;
}
</style>
